<template>
  <div class="app-container">
    <el-form :model="searchForm" :inline="true" @submit.native.prevent>
      <el-row>
        <el-col :span="20">
          <!-- <el-form-item label="任务单号:">
            <el-input v-model="searchForm.jobId" style="width:165px" placeholder="任务单号" />
          </el-form-item>
           -->
          <el-form-item>
            <el-input
              v-model="searchForm.fuzzy"
              style="width:250px"
              placeholder="项目名称/受检单位/任务单号"
              clearable
              @keyup.enter.native="handleSearch"
            />
          </el-form-item>

          <!--          <el-form-item label="任务状态:">-->
          <!--            <el-select v-model="searchForm.sampTaskStatus" clearable filterable style="width:165px" placeholder="请选择状态">-->
          <!--              <el-option-->
          <!--                v-for="item in Object.keys(SAMPLE_STATUS)"-->
          <!--                :key="item"-->
          <!--                :label="SAMPLE_STATUS[item]"-->
          <!--                :value="item"-->
          <!--              />-->
          <!--            </el-select>-->
          <!--          </el-form-item>-->
          <el-form-item>
            <el-button
              type="primary"
              class="iconfont icon-chaxun1"
              @click="handleSearch"
            >
              查询</el-button
            >
          </el-form-item>
        </el-col>
        <el-col :span="4" class="search-right">
          <el-button type="text" icon="el-icon-refresh" @click="handleSearch"
            >刷新</el-button
          >
        </el-col>
      </el-row>
    </el-form>
    <div>
      <el-table
        stripe
        border
        :data="sampleData"
        highlight-current-row
        :header-cell-style="{ background: '#ECF3FC' }"
        style="width: 100%"
      >
        <template slot="empty">
          <div class="table_empty">
            <div class="empty_tips">
              <span>
                暂无信息
              </span>
            </div>
          </div>
        </template>
        <el-table-column type="index" width="50" label="序号" align="center" />
        <el-table-column
          prop="projectName"
          label="项目名称"
          width="150px"
          align="center"
        />
        <el-table-column prop="taskSn" label="项目进度" align="center">
          <template slot-scope="{ row }">
            {{ row.taskSn }}/{{ row.taskCount }}
          </template>
        </el-table-column>
        <el-table-column
          prop="jobId"
          label="任务单号"
          width="130px"
          align="center"
        />
        <el-table-column
          prop="inspectionName"
          label="受检单位"
          align="center"
        />
        <el-table-column label="采样组长" align="center">
          <template slot-scope="{ row }">
            {{
              row.sampLeader && row.sampLeader ? row.sampLeader.toString() : ""
            }}
          </template>
        </el-table-column>
        <el-table-column label="任务时间" align="center" width="190px">
          <template slot-scope="{ row }">
            {{ row.startDate }}~{{ row.endDate }}
          </template>
        </el-table-column>
        <el-table-column prop="sampTaskStatus" label="状态" align="center">
          <template slot-scope="{ row }">
            <el-tag
              effect="dark"
              :type="row.sampTaskStatus | statusQualityFilter"
            >
              {{ SAMPLE_STATUS[row.sampTaskStatus] }}
            </el-tag>
          </template>
        </el-table-column>
        <!-- <el-table-column label="采样进度" width="120" align="center">
          <template slot-scope="{ row }">
            {{ row.completeSampCount }}/{{ row.sampCount }}
          </template>
        </el-table-column> -->

        <el-table-column
          fixed="right"
          align="center"
          label="操作"
          width="250px"
        >
          <template slot-scope="scope">
            <el-button type="text" @click="handleSampling(scope.row)">
              采样记录单模板下载</el-button
            >
            <el-button type="text" @click="handleDetail(scope.row)">
              详情</el-button
            >
            <!-- <div class="erc-divider-vertical" /> -->
            <!-- <el-button type="text" @click="handleSampleInfo(scope.row)">
              查看样品</el-button
            > -->
            <!-- <div class="erc-divider-vertical" /> -->
            <el-button type="text" @click="handlePrint(scope.row)">
              标签打印</el-button
            >
            <!-- <div v-permission="rolesKey" class="erc-divider-vertical" /> -->
            <!-- <el-button
              type="text"
              @click="retractsSampsTask(scope.row.jobId)"
              v-permission="rolesKey"
              >撤回任务</el-button
            > -->
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div style="float: right">
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="searchForm.pageNumber"
        :limit.sync="searchForm.pageSize"
        @pagination="handleSearch"
      />
    </div>

    <el-dialog
      :title="taskTitle + ' 任务详情'"
      :visible.sync="taskVisible"
      center
      width="70%"
      top="5vh"
    >
      <!-- <el-row>
        <el-col :span="12">
          <span>合同编号: {{ taskForm.contCode }}</span>
        </el-col>
        <el-col :span="12">
          <span>报价单号: {{ taskForm.offerId }}</span>
        </el-col>
      </el-row> -->
      <table class="info-table-new" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td style="background: #f5f5f5;">项目名称:</td>
          <td>{{ taskForm.projectName }}</td>
          <td style="background: #f5f5f5;">委托单位:</td>
          <td>{{ taskForm.consignorName }}</td>
        </tr>
        <tr>
          <td style="background: #f5f5f5;">委托联系人:</td>
          <td>{{ taskForm.consignorLinker }}</td>
          <td style="background: #f5f5f5;">委托联系人方式:</td>
          <td>{{ taskForm.consignorLinkerPhone }}</td>
        </tr>
        <tr>
          <td colspan="4" style="text-align: left;padding-left:15px;">
            工作要求:
          </td>
        </tr>
        <tr>
          <td colspan="4" style="text-align: left;padding-left:15px;">
            <el-row v-for="(item, index) in factorData" :key="index">
              <el-col :span="24">{{ item.secdClassName }}</el-col>
              <el-col v-for="el in item.factList" :key="el.id" :span="24">
                {{
                  el.factorPoint +
                    "（" +
                    el.dayCount +
                    "*" +
                    el.frequency +
                    "）: "
                }}{{ el.showFactName }}
                <span v-if="el.fbFlag === '1'" style="color: red;">(分包)</span>
              </el-col>
            </el-row>
          </td>
        </tr>
      </table>
    </el-dialog>

    <!--采样未开始-->
    <el-dialog
      :visible.sync="retractsVisibleOne"
      width="26%"
      :close-on-click-modal="false"
    >
      <div
        style="font-size: 18px;color: red;margin-top: -38px;margin-bottom: 18px;text-align: center;"
      >
        谨慎操作
      </div>
      <div style="font-size: 15px;">
        <span
          >撤回任务后，该任务下所有样品都会被作废，该任务会重新回到合样操作前，是否继续？</span
        >
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="retractsVisibleOne = false">取消</el-button>
        <el-button type="primary" @click="retractsDefine()">确认</el-button>
      </div>
    </el-dialog>
    <!--采样进行中-->
    <el-dialog
      :visible.sync="retractsVisibleTwo"
      width="26%"
      :close-on-click-modal="false"
    >
      <div
        style="font-size: 18px;color: red;margin-top: -38px;margin-bottom: 18px;text-align: center;"
      >
        谨慎操作
      </div>
      <div style="font-size: 15px;">
        <span>{{ titleTwo }}</span>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="retractsVisibleTwo = false">知道了</el-button>
      </div>
    </el-dialog>

    <!--现场采样记录单模板下载-->
    <el-dialog
      :visible.sync="templateDownload"
      width="30%"
      :close-on-click-modal="false"
    >
      <el-card style="margin-top: 5px;padding-bottom: 20px;">
        <div
          slot="header"
          class=""
          style="display:flex;justify-content: space-between;"
        >
          <div style="display:flex;align-items: center;">
            <div
              style="width: 3px;margin:auto 3px; height: 20px;background-color:steelblue;"
            />
            <span>现场采样记录单模板下载</span>
          </div>
          <div>
            <el-button type="primary" plain @click="channgeAddress()"
              >全部下载</el-button
            >
          </div>
        </div>

        <div>
          <div
            v-for="item in nameData"
            :key="item.id"
            style="display:flex;justify-content: space-between;margin: 3%;"
          >
            <div style="display:flex;align-items: center;">
              <span>{{ item.secdClassName }}</span>
            </div>
            <div>
              <el-button type="primary" plain @click="channgeData(item)"
                >下载</el-button
              >
            </div>
          </div>
        </div>
      </el-card>
      <div slot="footer" class="dialog-footer">
        <el-button @click="templateDownload = false">取消</el-button>
        <el-button type="primary" @click="retractsDefine()">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import * as sampleServer from "@/api/sample";
import * as dictServer from "@/api/dict";
import Pagination from "@/components/Pagination";
import { mapGetters } from "vuex";
import axios from "axios";
import JSZip from "jszip";
import FileSaver from "file-saver";
const SAMPLE_STATUS = {
  "2": "采样中",
  "3": "已完成"
};
export default {
  components: { Pagination },
  filters: {
    statusQualityFilter(status) {
      const statusMap = {
        "1": "",
        "2": "success"
      };
      return statusMap[status];
    }
  },
  data() {
    return {
      SAMPLE_STATUS,
      sampleData: [],
      rolesKey: [],
      searchForm: {
        fuzzy: "",
        jobId: "",
        projectName: "",
        sampTaskStatus: "2",
        enableStatus: "1",
        pageNumber: 1,
        pageSize: 10
      },
      total: 0,

      titleOne: "",
      titleTwo: "",
      jobId: null,
      retractsVisibleOne: false,
      retractsVisibleTwo: false,
      taskTitle: "",
      taskVisible: false,
      factorData: [],
      factorDetailData: [], // 自检因子
      factorOldDetailData: [], // 自检因子历史
      factorOutDetailData: [], // 分包因子
      factorOldOutDetailData: [], // 分包因子历史
      taskForm: {
        projectName: "",
        offerId: "",
        contCode: "",
        consignorName: "",
        consignorLinker: "",
        consignorLinkerPhone: ""
      },
      sampleTaskVisible: false,
      templateDownload: false,
      currentRow: {},
      multipleSelection: [],
      multipleOutSelection: [],
      perGroups: [],
      mergeData: [],
      mergeOutData: [],
      currentSelectionRow: {
        secdClassId: "",
        factorPoint: "",
        frequency: "",
        dayCount: ""
      },
      currentOutSelectionRow: {
        secdClassId: "",
        factorPoint: "",
        frequency: "",
        dayCount: ""
      },
      showFactorName: "",
      showOutFactorName: "",
      nameData: [],
      template: [
        {
          id: "001003",
          url:
            "http://mes.jshengzheng.com:9000/train/2024/11/19/地下水采样现场记录表_20241119140156A005.docx"
        },
        {
          id: "001001",
          url:
            "http://mes.jshengzheng.com:9000/train/2024/11/19/雨水、废水采样现场记录表_20241119140221A006.docx"
        },
        {
          id: "001004",
          url:
            "http://mes.jshengzheng.com:9000/train/2024/11/19/雨水、废水采样现场记录表_20241119140221A006.docx"
        },
        {
          id: "001002",
          url:
            "http://mes.jshengzheng.com:9000/train/2024/11/19/地表水采样现场记录表_20241119140248A007.docx"
        },
        {
          id: "001005",
          url:
            "http://mes.jshengzheng.com:9000/train/2024/11/19/地表水采样现场记录表_20241119140248A007.docx"
        },
        {
          id: "001006",
          url:
            "http://mes.jshengzheng.com:9000/train/2024/11/19/地表水采样现场记录表_20241119140248A007.docx"
        },
        {
          id: "001007",
          url:
            "http://mes.jshengzheng.com:9000/train/2024/11/19/地表水采样现场记录表_20241119140248A007.docx"
        },
        {
          id: "001008",
          url:
            "http://mes.jshengzheng.com:9000/train/2024/11/19/地表水采样现场记录表_20241119140248A007.docx"
        },
        {
          id: "002002",
          url:
            "http://mes.jshengzheng.com:9000/train/2024/11/19/有组织废气、锅（窑）炉废气现场检测记录表_20241119135004A004.docx"
        },
        {
          id: "0020022",
          url:
            "http://mes.jshengzheng.com:9000/train/2024/11/19/有组织废气、锅（窑）炉废气现场检测记录表_20241119135004A004.docx"
        },
        {
          id: "0020021",
          url:
            "http://mes.jshengzheng.com:9000/train/2024/11/19/饮食业油烟采样原始记录_20241119140314A008.docx"
        },
        {
          id: "002001",
          url:
            "http://mes.jshengzheng.com:9000/train/2024/11/19/空气和废气（含室内空气）采样现场记录_20241119140339A009.docx"
        },
        {
          id: "002003",
          url:
            "http://mes.jshengzheng.com:9000/train/2024/11/19/空气和废气（含室内空气）采样现场记录_20241119140339A009.docx"
        },
        {
          id: "002004",
          url:
            "http://mes.jshengzheng.com:9000/train/2024/11/19/空气和废气（含室内空气）采样现场记录_20241119140339A009.docx"
        },
        {
          id: "002005",
          url:
            "http://mes.jshengzheng.com:9000/train/2024/11/19/空气和废气（含室内空气）采样现场记录_20241119140339A009.docx"
        },
        {
          id: "002006",
          url:
            "http://mes.jshengzheng.com:9000/train/2024/11/19/空气和废气（含室内空气）采样现场记录_20241119140339A009.docx"
        },
        {
          id: "003002",
          url:
            "http://mes.jshengzheng.com:9000/train/2024/11/19/底质（底泥、沉积物）采样现场记录表_20241119140407A010.docx"
        },
        {
          id: "003001",
          url:
            "http://mes.jshengzheng.com:9000/train/2024/11/19/土壤 采 样 原 始 记 录 表_20241119140436A011.docx"
        },
        {
          id: "003003",
          url:
            "http://mes.jshengzheng.com:9000/train/2024/11/19/土壤 采 样 原 始 记 录 表_20241119140436A011.docx"
        },
        {
          id: "003004",
          url:
            "http://mes.jshengzheng.com:9000/train/2024/11/19/土壤 采 样 原 始 记 录 表_20241119140436A011.docx"
        },
        {
          id: "003005",
          url:
            "http://mes.jshengzheng.com:9000/train/2024/11/19/土壤 采 样 原 始 记 录 表_20241119140436A011.docx"
        },
        {
          id: "004001",
          url:
            "http://mes.jshengzheng.com:9000/train/2024/11/19/区域环境噪音噪声检测现场记录表_20241119140507A012.docx"
        },
        {
          id: "004002",
          url:
            "http://mes.jshengzheng.com:9000/train/2024/11/19/工业企业厂界噪声噪声检测现场记录表_20241119140525A013.docx"
        },
        {
          id: "004007",
          url:
            "http://mes.jshengzheng.com:9000/train/2024/11/19/工业企业厂界噪声噪声检测现场记录表_20241119140525A013.docx"
        },
        {
          id: "004003",
          url:
            "http://mes.jshengzheng.com:9000/train/2024/11/19/社会生活环境噪声噪声检测现场记录表_20241119140543A014.docx"
        },
        {
          id: "004004",
          url:
            "http://mes.jshengzheng.com:9000/train/2024/11/19/城市区域环境振动检测现场记录表_20241119140611A015.docx"
        },
        {
          id: "004005",
          url:
            "http://mes.jshengzheng.com:9000/train/2024/11/19/道路交通噪声检测现场记录表_20241119140826A017.docx"
        },
        {
          id: "004006",
          url:
            "http://mes.jshengzheng.com:9000/train/2024/11/19/道路交通噪声检测现场记录表_20241119140826A017.docx"
        },
        {
          id: "005001",
          url:
            "http://mes.jshengzheng.com:9000/train/2024/11/19/固废采样原始记录表_20241119140712A016.docx"
        },
        {
          id: "006001",
          url:
            "http://mes.jshengzheng.com:9000/train/2024/11/19/固废采样原始记录表_20241119140712A016.docx"
        }
      ]
    };
  },
  computed: {
    ...mapGetters(["userInfo"]),
    filterData() {
      if (this.showFactorName && this.showFactorName.length > 0) {
        const reg = new RegExp(this.showFactorName.trim());
        return this.factorDetailData.filter(i => reg.test(i.factorName));
      }
      return this.factorDetailData;
    },
    outFilterData() {
      if (this.showOutFactorName && this.showOutFactorName.length > 0) {
        const reg = new RegExp(this.showOutFactorName.trim());
        return this.factorOutDetailData.filter(i => reg.test(i.factorName));
      }
      return this.factorOutDetailData;
    }
  },
  created() {
    this.getFactorPeople();
    this.handleSearch();
    this.rolesKey = this.userInfo.roles;
  },
  methods: {
    getFactorPeople() {
      dictServer.findSampLeaders().then(res => {
        this.perGroups = res.result || [];
      });
    },
    handleSearch() {
      sampleServer.findSampTaskByCondition(this.searchForm).then(res => {
        if (res.code === 200) {
          this.sampleData = res.result.records;
          this.total = res.result.total;
        }
      });
    },
    handleDetail(row) {
      // 获取数据
      this.taskTitle = row.projectName;
      this.taskForm = Object.assign({}, row);
      sampleServer.getJobFactorsByJobId(row.jobId).then(result => {
        if (result.code === 200 && result.result) {
          this.factorData = this.doProcessData(result.result);
          this.taskVisible = true;
        }
      });
      // 封装展示数据
    },
    // 查看全部样品
    handleSampleInfo(row) {
      this.$router.push(`/sampleAllList/${row.sampTaskId}`);
    },
    doProcessData(data) {
      const parentArray = [];
      if (data.length > 0) {
        const factMap = new Map();
        data.forEach(i => {
          const o = parentArray.find(
            j => j.secdClassName === i.secdClassName && j.fbFlag === i.fbFlag
          );
          if (!o) {
            parentArray.push({
              secdClassName: i.secdClassName,
              fbFlag: i.fbFlag,
              factList: []
            });
          }
          if (factMap.get(i.secdClassName + "-" + i.fbFlag)) {
            const ls = factMap.get(i.secdClassName + "-" + i.fbFlag);
            ls.push(i);
          } else {
            const li = [];
            li.push(i);
            factMap.set(i.secdClassName + "-" + i.fbFlag, li);
          }
        });

        if (parentArray) {
          parentArray.forEach(e => {
            const flist = factMap.get(e.secdClassName + "-" + e.fbFlag);
            const nList = [];
            if (flist) {
              flist.forEach(j => {
                const n = nList.find(x => {
                  if (
                    x.factorPoint === j.factorPoint &&
                    x.frequency === j.frequency &&
                    x.dayCount === j.dayCount
                  ) {
                    x.showFactName = x.showFactName + "," + j.factorName;
                    return x;
                  } else {
                    return null;
                  }
                });
                if (!n) {
                  this.$set(j, "showFactName", j.factorName);
                  this.$set(j, "fbFlag", e.fbFlag);
                  nList.push(j);
                }
              });

              e.factList = nList;
            }
          });
        }
      }
      return parentArray;
    },

    clearSelectionRow() {
      this.currentSelectionRow = {
        secdClassId: "",
        factorPoint: "",
        frequency: "",
        dayCount: ""
      };
    },
    clearOutSelectionRow() {
      this.currentOutSelectionRow = {
        secdClassId: "",
        factorPoint: "",
        frequency: "",
        dayCount: ""
      };
    },

    // 采样列表撤回任务
    retractsSampsTask(jobId) {
      this.jobId = jobId;
      const data = { jobId: jobId };
      sampleServer.retractsSampTaskTwo(data).then(result => {
        if (result.code === 301) {
          this.titleTwo = result.message;
          this.retractsVisibleTwo = true;
        } else {
          this.retractsVisibleOne = true;
        }
      });
    },

    // 确定撤回
    retractsDefine() {
      const jobId = { jobId: this.jobId };
      sampleServer.retractsSampTask(jobId).then(result => {
        if (result.code === 200) {
          this.$notify({
            title: "成功",
            message: result.message,
            type: "success"
          });
          this.handleSearch();
        } else {
          this.$notify({
            title: "失败",
            message: result.message,
            type: "error"
          });
        }
      });
      this.retractsVisibleOne = false;
    },
    handleSampling(row) {
      sampleServer.findSampleClasss(row.sampTaskId).then(result => {
        if (result.code === 200 && result.result) {
          this.nameData = result.result || [];
        }
      });
      this.templateDownload = true;
    },

    getFile(url) {
      return new Promise((resolve, reject) => {
        axios({
          method: "get",
          url,
          responseType: "arraybuffer",
          onDownloadProgress: function(progressEvent) {}
        })
          .then(data => {
            // console.log(data);
            resolve(data.data);
          })
          .catch(error => {
            reject(error.toString());
          });
      });
    },
    channgeAddress() {
      const data = []; // 需要下载打包的路径, 可以是本地相对路径, 也可以是跨域的全路径
      //this.List为多个下载数据的地址数组
      this.template.forEach(item => {
        this.nameData.forEach(e => {
          if (item.id == e.secdClassId) {
            data.push(`${item.url}`); //item.fileurl把文件路径添加在要下载的data数组中
          }
        });
      });
      const zip = new JSZip();
      const cache = {};
      const promises = [];
      data.forEach(item => {
        const promise = this.getFile(item).then(data => {
          // 下载文件, 并存成ArrayBuffer对象
          const arr_name = item.split("/");
          const file_name = arr_name[arr_name.length - 1]; // 获取文件名
          zip.file(file_name, data, { binary: true }); // 逐个添加文件
          cache[file_name] = data;
        });
        promises.push(promise);
      });

      Promise.all(promises).then(() => {
        zip.generateAsync({ type: "blob" }).then(content => {
          // 生成二进制流
          FileSaver.saveAs(content, "打包下载.zip"); // 利用file-saver保存文件
        });
      });
    },

    channgeData(item) {
      this.template.forEach(e => {
        if (e.id == item.secdClassId) {
          var url = e.url;
          window.open(url);
        }
      });
    },

    handlePrint(row) {
      this.$router.push(`/sampleDetail/${row.sampTaskId}`);
    }
  }
};
</script>

<style scoped lang="scss" type="text/scss">
.search_div {
  > div {
    &:nth-child(1) {
      margin-right: 10px;
    }
    display: inline-block;
  }
}

.search_input {
  width: 200px;
  margin-bottom: 5px;
}
.search-right {
  text-align: right;
  padding-right: 25px;
}
.item {
  font-size: 16px;
}
::v-deep .el-card .el-card__header {
  padding: 5px 20px;
  background: #f3f2f2;
}
.info-table-new {
  font-size: 14px;
  width: 100%;
  text-align: center;
  margin-top: 10px;
  border-top: 1px solid #ececec;
  border-left: 1px solid #ececec;
  line-height: 35px;
  td {
    border-bottom: 1px solid #ececec;
    border-right: 1px solid #ececec;
    width: 25%;
    height: 35px;
    // &:nth-child(2n + 1) {
    //   width: 25%;
    //   background: #f5f5f5;
    // }
  }
}
</style>
<style scoped lang="scss" type="text/scss">
.search_div {
  > div {
    &:nth-child(1) {
      margin-right: 10px;
    }
    display: inline-block;
  }
}

.search_input {
  width: 200px;
  margin-bottom: 5px;
}
.search-right {
  text-align: right;
  padding-right: 25px;
}
.item {
  font-size: 16px;
}
::v-deep .el-card .el-card__header {
  padding: 5px 20px;
  background: #f3f2f2;
}
.block-flex {
  position: relative;
  display: flex;
  & > div {
    border: 1px solid #b7b7b7;
    width: 100px;
    margin: 0;
    line-height: 30px;
    text-align: center;
  }
  & > div:first-child {
    background: #b7b7b7;
  }
}
.card-left {
  width: 100%;
  min-height: 200px;
  max-height: 400px;
}
.card-right {
  width: 100%;
  min-height: 200px;
  max-height: 400px;
}
.el-card {
  overflow: auto;
}
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
.el-icon-arrow-down {
  font-size: 12px;
}
/deep/.el-table__header-wrapper .el-checkbox {
  display: none;
}
</style>
<style scoped>
table {
  background-color: transparent;
}

caption {
  padding-top: 8px;
  padding-bottom: 8px;
  color: #777;
  text-align: left;
}

th {
  text-align: left;
}

.table {
  width: 100%;
  max-width: 100%;
  margin-bottom: 20px;
}

.table > tbody > tr > td,
.table > tbody > tr > th,
.table > tfoot > tr > td,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > thead > tr > th {
  padding: 8px;
  line-height: 1.42857143;
  vertical-align: middle;
  border-top: 1px solid #ddd;
}

.table > thead > tr > th {
  vertical-align: bottom;
  border-bottom: 2px solid #ddd;
}

.table > caption + thead > tr:first-child > td,
.table > caption + thead > tr:first-child > th,
.table > colgroup + thead > tr:first-child > td,
.table > colgroup + thead > tr:first-child > th,
.table > thead:first-child > tr:first-child > td,
.table > thead:first-child > tr:first-child > th {
  border-left: 1px solid #f1f2f4;
}

.table > tbody + tbody {
  border-top: 2px solid #ddd;
}

.table .table {
  background-color: #fff;
}

.table-condensed > tbody > tr > td,
.table-condensed > tbody > tr > th,
.table-condensed > tfoot > tr > td,
.table-condensed > tfoot > tr > th,
.table-condensed > thead > tr > td,
.table-condensed > thead > tr > th {
  padding: 5px;
}

.table-bordered {
  border: 1px solid #ddd;
}

.table-bordered > tbody > tr > td,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > td,
.table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > thead > tr > th {
  border: 1px solid #ddd;
}

.table-bordered > thead > tr > td,
.table-bordered > thead > tr > th {
  border-bottom-width: 2px;
}

.table-striped > tbody > tr:nth-of-type(odd) {
  background-color: #f9f9f9;
}

.table-hover > tbody > tr:hover {
  background-color: #f5f5f5;
}

table col[class*="col-"] {
  position: static;
  display: table-column;
  float: none;
}

table td[class*="col-"],
table th[class*="col-"] {
  position: static;
  display: table-cell;
  float: none;
}

.table > tbody > tr.active > td,
.table > tbody > tr.active > th,
.table > tbody > tr > td.active,
.table > tbody > tr > th.active,
.table > tfoot > tr.active > td,
.table > tfoot > tr.active > th,
.table > tfoot > tr > td.active,
.table > tfoot > tr > th.active,
.table > thead > tr.active > td,
.table > thead > tr.active > th,
.table > thead > tr > td.active,
.table > thead > tr > th.active {
  background-color: #f5f5f5;
}

.table-hover > tbody > tr.active:hover > td,
.table-hover > tbody > tr.active:hover > th,
.table-hover > tbody > tr:hover > .active,
.table-hover > tbody > tr > td.active:hover,
.table-hover > tbody > tr > th.active:hover {
  background-color: #e8e8e8;
}

.table > tbody > tr.success > td,
.table > tbody > tr.success > th,
.table > tbody > tr > td.success,
.table > tbody > tr > th.success,
.table > tfoot > tr.success > td,
.table > tfoot > tr.success > th,
.table > tfoot > tr > td.success,
.table > tfoot > tr > th.success,
.table > thead > tr.success > td,
.table > thead > tr.success > th,
.table > thead > tr > td.success,
.table > thead > tr > th.success {
  background-color: #dff0d8;
}

.table-hover > tbody > tr.success:hover > td,
.table-hover > tbody > tr.success:hover > th,
.table-hover > tbody > tr:hover > .success,
.table-hover > tbody > tr > td.success:hover,
.table-hover > tbody > tr > th.success:hover {
  background-color: #d0e9c6;
}

.table > tbody > tr.info > td,
.table > tbody > tr.info > th,
.table > tbody > tr > td.info,
.table > tbody > tr > th.info,
.table > tfoot > tr.info > td,
.table > tfoot > tr.info > th,
.table > tfoot > tr > td.info,
.table > tfoot > tr > th.info,
.table > thead > tr.info > td,
.table > thead > tr.info > th,
.table > thead > tr > td.info,
.table > thead > tr > th.info {
  background-color: #d9edf7;
}

.table-hover > tbody > tr.info:hover > td,
.table-hover > tbody > tr.info:hover > th,
.table-hover > tbody > tr:hover > .info,
.table-hover > tbody > tr > td.info:hover,
.table-hover > tbody > tr > th.info:hover {
  background-color: #c4e3f3;
}

.table > tbody > tr.warning > td,
.table > tbody > tr.warning > th,
.table > tbody > tr > td.warning,
.table > tbody > tr > th.warning,
.table > tfoot > tr.warning > td,
.table > tfoot > tr.warning > th,
.table > tfoot > tr > td.warning,
.table > tfoot > tr > th.warning,
.table > thead > tr.warning > td,
.table > thead > tr.warning > th,
.table > thead > tr > td.warning,
.table > thead > tr > th.warning {
  background-color: #fcf8e3;
}

.table-hover > tbody > tr.warning:hover > td,
.table-hover > tbody > tr.warning:hover > th,
.table-hover > tbody > tr:hover > .warning,
.table-hover > tbody > tr > td.warning:hover,
.table-hover > tbody > tr > th.warning:hover {
  background-color: #faf2cc;
}

.table > tbody > tr.danger > td,
.table > tbody > tr.danger > th,
.table > tbody > tr > td.danger,
.table > tbody > tr > th.danger,
.table > tfoot > tr.danger > td,
.table > tfoot > tr.danger > th,
.table > tfoot > tr > td.danger,
.table > tfoot > tr > th.danger,
.table > thead > tr.danger > td,
.table > thead > tr.danger > th,
.table > thead > tr > td.danger,
.table > thead > tr > th.danger {
  background-color: #f2dede;
}

.table-hover > tbody > tr.danger:hover > td,
.table-hover > tbody > tr.danger:hover > th,
.table-hover > tbody > tr:hover > .danger,
.table-hover > tbody > tr > td.danger:hover,
.table-hover > tbody > tr > th.danger:hover {
  background-color: #ebcccc;
}

.table-responsive {
  min-height: 3.01%;
  overflow-x: auto;
}

.table-bordered,
.table-bordered > tbody > tr > td,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > td,
.table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > thead > tr > th {
  border: 1px solid #e9ecef;
  text-align: center;
}

.table-bordered,
td,
th {
  border-radius: 0 !important;
}

.table-bordered > tbody > tr:last-child > td {
  border-bottom: 1px solid #e9ecef;
}

.bootstrap-table .fixed-table-container .fixed-table-header {
  overflow: hidden;
  background: rgba(0, 0, 0, 0.05);
}

.fixed-table-header .table > thead > tr {
  background: none !important;
}

.table > thead > tr {
  color: #636363;
  font-weight: 400;
  background: rgba(0, 0, 0, 0.05);
  /*   background: repeat-x #fafafa;
  background-image: -webkit-linear-gradient(top,#F8F8F8 0,#fafafa 100%);
  background-image: -o-linear-gradient(top,#F8F8F8 0,#fafafa 100%);
  background-image: linear-gradient(to bottom,#F8F8F8 0,#fafafa 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff8f8f8', endColorstr='#ffececec', GradientType=0); */
}

.table > thead > tr > th {
  border-color: #e9ecef;
  font-weight: 700;
  border-right-color: transparent;
}

.table > thead > tr > th .ace-icon:first-child {
  margin-right: 2px;
}

.table > thead > tr > th:first-child {
  border-left-color: #f1f1f1;
}

.table > thead > tr > th:last-child {
  border-right-color: #f1f1f1;
}

.table.table-bordered > thead > tr > th {
  vertical-align: middle;
}

td.center,
th.center {
  text-align: center;
}

td .lbl,
th .lbl {
  margin-bottom: 0;
}

td .lbl:only-child,
th .lbl:only-child {
  vertical-align: top;
}

.table-header {
  background-color: #307ecc;
  color: #fff;
  font-size: 14px;
  line-height: 30px;
  padding-left: 12px;
  margin-bottom: 1px;
}

.table-header .close {
  margin-right: 8px;
  margin-top: 0;
  opacity: 0.45;
  filter: alpha(opacity=45);
}

.table-header .close:hover {
  opacity: 0.75;
  filter: alpha(opacity=75);
}

th.detail-col {
  width: 48px;
  text-align: center;
}

tr.detail-row {
  display: none;
}

tr.detail-row.open {
  display: block;
  display: table-row;
}

tr.detail-row > td {
  background-color: #f1f6f8;
  border-top: 3px solid #d1e1ea !important;
}

.table-detail {
  background-color: #fff;
  border: 1px solid #dcebf7;
  width: 100%;
  padding: 12px;
}

.table-detail td > .profile-user-info {
  width: 100%;
}
</style>
